<template>
  <a-list item-layout="horizontal" :data-source="grades" :pagination="{pageSize:3}">
    <template #renderItem="{ item }">
      <a-list-item>
        <template #actions>
          <button key="list-loadmore-edit" @click="handleEditClick(item.gradeID)">edit</button>
          <button key="list-loadmore-more">more</button>
        </template>
        <a-list-item-meta
            :description="item.gradeName"
        >
          <template #title>
            <a href="https://www.antdv.com/">{{ item.gradeID }}</a>
          </template>
        </a-list-item-meta>

      </a-list-item>
    </template>
  </a-list>
<!--  <hr/>-->
<!--  <ul>-->
<!--    <li v-for="item in grades">-->
<!--      {{item.gradeID}} &#45;&#45; {{item.gradeName}}-->
<!--      <button>编辑</button>-->
<!--      <button>删除</button>-->
<!--    </li>-->
<!--  </ul>-->
</template>

<script>
import axios from 'axios'
export default {
  name: "GradeListView",
  data(){
    return {
      grades: []
    }
  },
  methods:{
    loadgrades(){
      axios.get('http://localhost:8080/grade/all').then(res => {
        console.log(res.data)
        this.grades = res.data.data
      })
    },
    handleEditClick(id){
      alert(id)
    }
  },
  created(){
    this.loadgrades()
  }
}
</script>

<style scoped>

</style>